<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>考试管理</title>
	<link rel="stylesheet" href="/css/elementui/index.css">
	<link rel="stylesheet" href="/css/exam/css/style.css">
	<link rel="stylesheet" href="/iconfont/iconfont.css">
</head>

<body>
    <!-- 添加分类 -->
    <div id="app">
         <div  class="p-30">
			  <el-row>
						<span class="icon iconfont icon-arrow_back"></span> <a href="{{route('admin.examview.category')}}">返  回</a> | 添加分类
			  </el-row><br>
            {{ csrf_field() }}
            <el-form :model="formData" :rules="rules" ref="formData" label-width="270px" class="demo-ruleForm">
                <!-- <el-form-item label="父级" clearable prop="c_fid">
                    <el-select v-model="formData.c_fid" multiple filterable allow-create default-first-option placeholder="请选择">
                        <el-option v-for="(item, index) in categories" :key="index" :label="item.c_name" :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="添&ensp;&ensp;加" prop="id" style="width: 450px;display:none">
                    <el-input v-model="formData.id"></el-input>
                </el-form-item> -->
                <el-form-item label="分类名" prop="c_name" style="width: 450px;">
                    <el-input v-model="formData.c_name"></el-input>
                </el-form-item>
                <el-form-item label="token" prop="_token" style="width: 450px;display:none">
                    <el-input v-model="formData._token"></el-input>
                </el-form-item>
                <el-form-item label="排&ensp;&ensp;序" prop="c_sort" placeholder="">
                    <div style="width: 180px;float:left;">
                        <el-input type="number" v-model="formData.c_sort"></el-input>
                    </div>
                    <i style="margin-left:10px;color:#606266;" class="el-icon-info">请输入整数。小数排在前面，大数排在后面。</i>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="formValidate('formData')" style="margin-right: 25px;"  v-debounce>保&ensp;&ensp;存</el-button>
                    <!-- :loading="loading" -->
                    <el-button @click="resetForm('formData')">重&ensp;&ensp;置</el-button>
                </el-form-item>
        
        </el-form>
    </div>
    </div>
</body>
	<script src="/css/exam/js/vue.js"></script>
	<script src="/css/elementui/index.js"></script>
	<script src="/css/exam/js/axios.min.js"></script>
	<script src="/css/exam/js/common.js"></script>
<script>
    new Vue({
        el: '#app',
        data: function() {
            return {
                formData: {
                    // id: '',
                    c_sort: '',
                    c_name: '',
                    _token: '{{csrf_token()}}'
                },
                rules: {
                    c_sort: [{
                        required: true,
                        message: '排序不能为空',
                        trigger: 'blur',
                    }, ],
                    c_name: [{
                        required: true,
                        message: '分类名不能为空',
                        trigger: 'blur',
                    }, ],
                    categories: [],
                }
            }
        },
        created() {
            console.log('-------------->', '{{csrf_token()}}')
            // this.tableData();
        },
        methods: {
            // tableData() {
            //     axios.post('/admin/exam/category_index', {})
            //         .then(res => {
            //             this.categories = res.data.data
            //             console.log('请求成功：', res.data.data);
            //         }).catch(error => {
            //             console.log('请求失败：' + error);
            //         })
            // },
            formValidate(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        let c_name = this.formData.c_name;
                        let c_sort = this.formData.c_sort;
                        let _token = this.formData._token;
                        axios.post('/admin/exam/category_edit', {
                                c_name: c_name,
                                c_sort: c_sort,
                                _token: _token,
                            })
                            .then(res => {
                                if (res.data.code == 0) {

                                    this.$message({
                                        type: 'success',
                                        message: '保存成功！'
                                    });
                                    this.$refs[formName].resetFields();
                                }  else if(res.data.code == 408){
                                    this.$message({
                                        type: 'info',
                                        message: '该名称已存在，请重新录入！'
                                    })
                                } else{
									this.$message({
									    type: 'info',
									    message: '网络原因，请稍后再试'
									})
								}
                            })
                    } else {
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
            goBack() {
                window.history.go(-1)
                console.log('go back');
            },
        }
    })
</script>
<style>
  a{color:#409EFF;text-decoration: none;}
</style>
</html>